<template>
  <a-layout id="components-layout-demo-side" style="min-height: 100vh">
    <a-layout-sider v-model="collapsed" collapsible>
      <a-menu theme="dark" :default-selected-keys="[2]" mode="inline" @click="handleMenuClick">
        <a-menu-item :key="item.key" v-for="item in menuList">
          <a-icon type="dashboard" />
          <span>{{ item.title }}</span></a-menu-item
        >
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #fff; padding: 0 0 0 16px;">
        <a-button type="link" v-if="$route.query.id" @click="$router.back()">返回</a-button>
      </a-layout-header>
      <a-layout-content style="margin: 0 16px">
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item>{{ menu && menu.title }}</a-breadcrumb-item>
          <a-button v-if="user &&(user.state==2 || user.state == 3|| user.state == 1)" type="link">{{user.state == 1? '审核中' : user.state == 2 ? '审核通过' : user.state == 3 ?'审核驳回':''}}</a-button>
        </a-breadcrumb>

        <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
          <component @update="getInfo" :is="currentComponent" :user="user"></component>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import PersonnelManagement from './components/PersonnelManagement.vue'
import DashboardComponent from './components/BasicInfoForm.vue'
import DeviceOperations from './components/deviceOperations.vue'
import EmployeeCRUD from './components/EmployeeCRUD.vue'
import DepartmentCRUD from './components/DepartmentCRUD.vue'
import BranchOfficeCRUD from './components/BranchOfficeCRUD.vue'
import { mapGetters } from 'vuex'
import BindCA from './components/bindCA.vue'

export default {
  name: 'App',
  components: {
    PersonnelManagement,
    DashboardComponent,
    DeviceOperations,
    EmployeeCRUD,
    DepartmentCRUD,
    BranchOfficeCRUD,
    BindCA,
  },
  data() {
    return {
      menuList: [
        { title: '基本信息', key: 2, componentName: 'DashboardComponent' },
        { title: '人员管理', key: 1, componentName: 'PersonnelManagement' },
        { title: '设施设备', key: 3, componentName: 'DeviceOperations' },
        { title: '负责人', key: 4, componentName: 'EmployeeCRUD' },
        { title: '部门', key: 5, componentName: 'DepartmentCRUD' },
        { title: '分支机构', key: 6, componentName: 'BranchOfficeCRUD' },
        { title: '绑定CA', key: 7, componentName: 'bindCA' },
      ],
      menu:{ title: '基本信息', key: 2, componentName: 'DashboardComponent' },
      collapsed: false,
      sysUserId: null,
      user: null,
      currentComponent: 'DashboardComponent',
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  created() {
    if(this.$route.query?.id){
      this.menuList = this.menuList.filter(item => item.key !== 7)
    }
    this.sysUserId = this.$route.query?.id || this.userInfo?.id
    this.getInfo()
  },
  methods: {
    handleMenuClick(e) {
      console.log(e)
      this.menu = this.menuList.find(item => item.key === e.key)
      this.currentComponent = this.menu.componentName
    },
    getInfo() {
      this.$http.post('/register/agencyLegal/queryByInfo', { sysUserId: this.sysUserId }).then(r => {
        this.user = r.result
      })
    },
  },
}
</script>

<style>
#components-layout-demo-side .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>
